<template>
    <view class="empty" :style="{ height: height + 'vh' }">
        <slot>
            <view class="img" v-if="imgShow">
                <image :src="imgUrl" mode="widthFix" />
            </view>
        </slot>
        <view class="txt">
            {{ tips }}
        </view>
        <slot name="action"></slot>
    </view>
</template>

<script lang="ts" setup>
interface EmptyProps {
    imgUrl?: string
    imgShow?: boolean
    tips?: string
    height?: number
}

withDefaults(defineProps<EmptyProps>(), {
    imgUrl: '/static/images/empty.png',
    imgShow: true,
    tips: '暂无数据~',
    height: 60
})
</script>

<style lang="scss" scoped>
.empty {
    width: 100%;
    padding: 24rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .txt {
        font-size: 26rpx;
        color: var(--theme-text-secondary, #666);
        text-align: center;
        margin: 20rpx 0;
    }

    .img {
        width: 70%;
        max-width: 400rpx;
        margin: 0 auto;
        text-align: center;

        image {
            width: 100%;
        }
    }
}
</style>
